<!-- D:/project/app/ydz-app-uniapp/static/images/serve -->
<template>
	<view class="pagebody">
		<view class="topbox borderbox">
			<NavHeader :type="1"></NavHeader>
		</view>

		<!-- 组件1 -->
		<view class="combox" style="margin-top: -50rpx;">
			<view class="flex-row align-center" style="">
				<view class="" style="width: 8rpx;height: 40rpx;border-radius: 50rpx;background: #00D9B2;">
				</view>
				<view class=" fz40 fwbold" style="margin-left: 8rpx;color: #00D9B2;">
					什么情况下，需要日本远程问诊？
				</view>
			</view>
			<!-- 			<view class="color303b39 fz36 mt30" style="line-height: 64rpx;">
				大数据调查显示，“一药难觅”的背后存在三大痛点：
			</view> -->
			<view class="mt30">
				<view class="linebox mt16">
					<view class=" flex-row align-center">
						<view class="fz24 justify-center align-center"
							style="width: 32rpx;height: 32rpx;background: #00D9B2;color: #fff;border-radius: 50%;">
							1
						</view>
						<view class="fz36 fwbold ml16" style="color: #00D9B2;">
							需开具处方时
						</view>
					</view>
					<view class="color303b39 fz32 mt16" style="margin-left: 48rpx;line-height: 48rpx;">
						某些疾病或特定药物，需要医生问诊后才能开具处方。通过远程会诊，医生线上开方，免去奔波，节约时间与费用。
					</view>
				</view>
				<view class="linebox mt16">
					<view class=" flex-row align-center">
						<view class="fz24 justify-center align-center"
							style="width: 32rpx;height: 32rpx;background: #00D9B2;color: #fff;border-radius: 50%;">
							2
						</view>
						<view class="fz36 fwbold ml16" style="color: #00D9B2;">
							寻求“第二诊疗意见”时
						</view>
					</view>
					<view class="color303b39 fz32 mt16" style="margin-left: 48rpx;line-height: 48rpx;">
						通过日本远程问诊，获得日本权威医学专家的第二诊疗意见，寻求新的诊疗方案。
					</view>
				</view>
				<view class="linebox mt16">
					<view class=" flex-row align-center">
						<view class="fz24 justify-center align-center"
							style="width: 32rpx;height: 32rpx;background: #00D9B2;color: #fff;border-radius: 50%;">
							3
						</view>
						<view class="fz36 fwbold ml16" style="color: #00D9B2;">
							赴日就医前
						</view>
					</view>
					<view class="color303b39 fz32 mt16" style="margin-left: 48rpx;line-height: 48rpx;">
						通过远程问诊评估，确认日本就医的可行性，确定海外医院及医生接诊与否，避免长途跋涉。
					</view>
				</view>
			</view>
		</view>

		<!-- 组件1 -->
		<view class="combox" style="margin-top: 16rpx;">
			<view class="flex-row align-center" style="">
				<view class="" style="width: 8rpx;height: 40rpx;border-radius: 50rpx;background: #00D9B2;">
				</view>
				<view class=" fz40 fwbold" style="margin-left: 8rpx;color: #00D9B2;">
					日本远程问诊有用吗？
				</view>
			</view>
			<view class="mt30">
				<view class="linebox mt16">
					<view class=" flex-row align-center">
						<view class="fz24 justify-center align-center"
							style="width: 32rpx;height: 32rpx;background: #00D9B2;color: #fff;border-radius: 50%;">
							1
						</view>
						<view class="fz36 color303b39 ml16" style="">
							可以获取更高的生存机会
						</view>
					</view>
				</view>
				<view class="linebox mt16">
					<view class=" flex-row align-center">
						<view class="fz24 justify-center align-center"
							style="width: 32rpx;height: 32rpx;background: #00D9B2;color: #fff;border-radius: 50%;">
							2
						</view>
						<view class="fz36 color303b39 ml16" style="">
							可以低成本问诊日本名医
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="combox" style="margin-top: 16rpx;">
			<view class="flex-row align-center" style="">
				<view class="" style="width: 8rpx;height: 40rpx;border-radius: 50rpx;background: #00D9B2;">
				</view>
				<view class=" fz40 fwbold" style="margin-left: 8rpx;color: #00D9B2;">
					日本远程问诊适应人群
				</view>
			</view>
			<view class="mt30">
				<view class="linebox mt16">
					<view class=" flex-row align-center">
						<view class="fz24 justify-center align-center"
							style="width: 32rpx;height: 32rpx;background: #00D9B2;color: #fff;border-radius: 50%;">
							1
						</view>
						<view class="fz36 color303b39 ml16" style="">
							病情复杂的高龄患者
						</view>
					</view>
				</view>
				<view class="linebox mt16">
					<view class=" flex-row align-center">
						<view class="fz24 justify-center align-center"
							style="width: 32rpx;height: 32rpx;background: #00D9B2;color: #fff;border-radius: 50%;">
							2
						</view>
						<view class="fz36 color303b39 ml16" style="">
							恶性肿瘤患者(尤其已进展至骨转移阶段)
						</view>
					</view>
				</view>
				<view class="linebox mt16">
					<view class=" flex-row align-center">
						<view class="fz24 justify-center align-center"
							style="width: 32rpx;height: 32rpx;background: #00D9B2;color: #fff;border-radius: 50%;">
							3
						</view>
						<view class="fz36 color303b39 ml16" style="">
							寻求第二意见或创新治疗策略的患者
						</view>
					</view>
				</view>
				<view class="linebox mt16">
					<view class=" flex-row align-center">
						<view class="fz24 justify-center align-center"
							style="width: 32rpx;height: 32rpx;background: #00D9B2;color: #fff;border-radius: 50%;">
							4
						</view>
						<view class="fz36 color303b39 ml16" style="">
							追求高质量医疗服务的患者
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 组件5 -->
		<view class="formbox">
			<view class="justify-center flex-col align-center"
				style="border-bottom: 1rpx solid #D7DDDC;padding-bottom: 24rpx;">
				<view class="title " style="">
					<span
						style="font-weight: 800;font-size: 40rpx;color: #303B39;z-index: 99;position: relative;">留言板</span>
					<view class="pos-abs titleline">
					</view>
				</view>
				<view class="" style="font-size: 28rpx;color: #576260;margin-top: 24rpx;">
					提交您的相关信息，耐心等到药队长医药顾问联系。
				</view>
			</view>
			<view class="formcontent">
				<view class="" style="font-weight: 600;font-size: 32rpx;color: #576260;">
					称呼
				</view>
				<uni-easyinput style="margin-top: 24rpx;border-radius: 16rpx;height: 90rpx;" v-model="leaveBoard.name"
					:placeholderStyle="placeholderStyle" placeholder="请输入您的称呼"></uni-easyinput>
				<view class="" style="font-weight: 600;font-size: 32rpx;color: #576260;margin-top: 32rpx;">
					联系方式 <span style="color: red;">*</span>
				</view>
				<uni-easyinput type="number" style="margin-top: 24rpx;border-radius: 16rpx;height: 90rpx;"
					v-model="leaveBoard.tel" :placeholderStyle="placeholderStyle"
					placeholder="请输入您的联系方式"></uni-easyinput>
				<view class="" style="font-weight: 600;font-size: 32rpx;color: #576260;margin-top: 32rpx;">
					问题描述
				</view>
				<u-input type="textarea" maxlength="500" border
					style="margin-top: 24rpx;border-radius: 16rpx;height: 253rpx;overflow: auto;font-size: 32rpx;"
					v-model="leaveBoard.content" :placeholderStyle="textareaStyle" placeholder="请输入您的问题描述" />
				<view class="align-center loginbtn justify-between">
					<button class="button fwbold" :style="{opacity:leaveBoard.tel.length>0?'1':'0.5'}"
						:disabled="leaveBoard.tel.length>0?false:true" type="primary" @click="submit">立即提交</button>
				</view>
			</view>
		</view>
	



		<!-- 组件6 -->
		<view class="remindbox">
			<view class="align-center" style="border-bottom: 1rpx solid #D7DDDC;height: 112rpx;padding: 0 32rpx;">
				<image src="@/static/images/knowledge/mesboard/light.png"
					style="width: 27rpx;height: 36rpx;margin-right: 16rpx;" mode=""></image>
				<view class="" style="font-weight: 800;font-size: 36rpx;color: #00977C;">
					药队长温馨提示您
				</view>
			</view>
			<view class="process borderbox">
				<view class="processbox borderbox pos-rel" style="">
					<view class="pos-abs circular">
						1
					</view>
					请准确填写您的联系方式，并保持通信畅通，以便药队长医学顾问能联系到您。
				</view>
				<view class="processbox borderbox pos-rel" style="">
					<view class="pos-abs circular">
						2
					</view>
					咨询人数较多，药队长医学顾问回复不及时，请您谅解。如果急需解决，可拨打免费电话：<a style="color: #00D9B2;"
						href="tel:4000012811">400-001-2811</a>；或者点击免费咨询，立刻咨询。
				</view>
				<view class="processbox borderbox pos-rel" style="padding-bottom: 0;">
					<view class="pos-abs circular">
						3
					</view>
					药队长承诺，严格保护您的个人信息。
				</view>
			</view>
		</view>

		<!-- 组件7 -->
		<zxkfcom></zxkfcom>


		<FixedFoot :typeid="3"></FixedFoot>
	</view>
</template>

<script>
	import FixedFoot from '../../layouts/fixedfoot.vue';
	import NavHeader from '../../layouts/navheader.vue';
	import zxkfcom from '../../components/generalcom/zxkfcom.vue';
	import {
		leaveBoardAdd
	} from '@/api/api.js'
	export default {
		components: {
			FixedFoot,
			NavHeader,
			zxkfcom
		},
		onLoad() {

		},
		data() {
			return {
				placeholderStyle: "color:#7E8987;font-size:32rpx;font-weight: 300;",
				textareaStyle: "color:#7E8987;font-size:32rpx;font-weight: 300;",
				leaveBoard: {
					name: '',
					tel: '',
					content: ''
				}
			}
		},
		methods: {
			submit() {
				// 正则表达式
				if (this.leaveBoard.tel != '') {
					if (!(/^1[3456789]\d{9}$/.test(this.leaveBoard.tel))) {
						this.$modal.msgError("手机号码格式错误，请重新输入")
						return false;
					}
				} else {
					this.$modal.msgError("请输入手机号码")
					return false;
				}
				leaveBoardAdd(this.leaveBoard).then(res => {
					if (res.code == 200) {
						this.$modal.msgSuccess("预约成功，客服人员将会与您联系。")
						this.leaveBoard = {
							name: '',
							tel: '',
							content: ''
						}
					} else if (res.code == 500) {
						// 重复提交！！！
						this.$modal.msgSuccess("已预约成功，请勿重复预约。")
						this.leaveBoard = {
							name: '',
							tel: '',
							content: ''
						}
					}
				});
			},
		},
		created() {},
	}
</script>

<style lang="scss" scoped>
	::v-deep .is-input-border {
		height: 90rpx;
		border-radius: 16rpx;
		border: 1rpx solid #D7DDDC;
	}

	::v-deep .uni-input-wrapper {
		font-size: 32rpx;
	}

	::v-deep .uni-easyinput__content-input {
		padding: 0 33rpx;
	}

	::v-deep .u-input__textarea {
		font-size: 32rpx;
		padding: 21rpx 0;
	}

	.pagebody {
		padding-bottom: 136rpx;
		background: #F0F6F5;

		.topbox {
			height: 547rpx;
			background: url('../../static/images/serve/ycwzpagebg.png') no-repeat;
			background-size: cover;
			padding: 36rpx 24rpx;
		}

		.combox {
			padding: 48rpx 24rpx 56rpx;
			background: #fff;
			border-radius: 32rpx;
			margin-top: 16rpx;

			.linebox {
				background: linear-gradient(125deg, #F5FEFC 0%, #E7FCF8 100%);
				border-radius: 24rpx;
				padding: 32rpx 24rpx;

			}

			// 组件2
			.card_div {
				padding: 24rpx;
				border-radius: 24rpx;

				.card {
					border-left: 1rpx dashed #80dbe4;
					position: relative;

					.smayuan {
						width: 16rpx;
						height: 16rpx;
						border-radius: 50%;
						background: #00D9B2;
						position: absolute;
						border: 2rpx solid rgba(2, 183, 202, 0.1);
						z-index: 3;
						top: 8rpx;
						left: -8rpx;
					}

					.bigyuan {
						width: 32rpx;
						height: 32rpx;
						border-radius: 50%;
						background-color: #e6f8fa;
						border: 4rpx solid rgba(2, 183, 202, 0.10);
						position: absolute;
						left: -16rpx;
					}

					.num {
						width: 30rpx;
						height: 24rpx;
						font-size: 36rpx;
						font-family: Microsoft YaHei-Bold, Microsoft YaHei;
						font-weight: bold;
						color: #00D9B2;
						line-height: 32rpx;
						margin-left: 24rpx;
					}

					.title {
						font-weight: bold;
						color: #303B39;
						position: absolute;
						top: -10rpx;
						left: 80rpx;
					}

					.material_title {
						color: #333333;
						position: absolute;
						top: -5rpx;
						left: 66rpx;
					}

					.cardcon {
						background: #f8f8f8;
						border-radius: 16rpx;
						padding: 16rpx 16rpx 16rpx 24rpx;
						margin-top: 32rpx;
						margin-left: 60rpx;
						font-weight: 400;
						color: #323434;
					}


					.materials_remark {
						height: 14rpx;
						font-family: Microsoft YaHei-Regular, Microsoft YaHei;
						font-weight: 400;
						color: #666666;
						line-height: 14rpx;
						margin-left: 60rpx;
						margin-top: 24rpx;
					}
				}
			}

			// 组件7
			.comcard {
				margin-bottom: 32rpx;
				width: 343rpx;
				height: 400rpx;
				background: linear-gradient(180deg, rgba(0, 255, 209, 0.1) 0%, rgba(0, 255, 209, 0) 100%);
				box-shadow: inset 0px 0px 24px 0px rgba(183, 255, 238, 0.5);
				border-radius: 24px 24px 24px 24px;
				border-image: linear-gradient(180deg, rgba(221, 253, 243, 0.5), rgba(160, 244, 229, 0.5)) 1 1;
			}

		}

		.formbox {
			box-sizing: border-box;
			padding-top: 32rpx;
			background: #fff;
			border-radius: 32rpx;
			margin-top: 16rpx;

			.title {
				position: relative;
				width: max-content;
				padding: 0 16rpx;

				.titleline {
					bottom: 0;
					left: 0;
					height: 16rpx;
					width: 100%;
					background: #00D9B2;
					border-radius: 50rpx;
					z-index: 1;
				}
			}

			.formcontent {
				box-sizing: border-box;
				padding: 32rpx;

				.loginbtn {
					margin-top: 32rpx;

					uni-button {
						border-radius: 98rpx;
						width: 100%;
					}

					uni-button:after {
						border: none;
					}

					.button {
						background-color: #00D9B2;
						display: flex;
						align-items: center;
						justify-content: center;
						font-size: 36rpx;

					}
				}
			}
		}

		.remindbox {
			margin-top: 16rpx;
			box-sizing: border-box;
			background: #fff;
			border-radius: 32rpx;

			.process {
				padding: 29rpx 32rpx 80rpx 50rpx;

				.processbox {
					padding: 0 20rpx 48rpx 38rpx;
					border-left: 1rpx dashed #00D9B2;
					font-weight: 500;
					font-size: 32rpx;
					color: #303B39;
					line-height: 56rpx;

					.circular {
						position: absolute;
						left: -18rpx;
						top: 0;
						width: 36rpx;
						height: 36rpx;
						border-radius: 50%;
						background: #00D9B2;
						color: #fff;
						font-size: 28rpx;
						text-align: center;
						line-height: 36rpx;
					}
				}
			}
		}

	}
</style>